<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>美团外卖</title>
  <style>
    /* CSS code for styling */

    body {
      margin: 0;
      padding: 0;
      background-color: #F7D246;
    }

    .container {
      font-family: Arial, sans-serif;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      padding: 20px;
    }

    .image-text {
      text-align: center;
      margin: 10px;
      background-color: #FFFFFF;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .image-text img {
      display: block;
      margin: 10px auto;
      max-width: 100%;
      height: auto;
      border-radius: 10px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    .image-text h2 {
      margin: 10px 0;
      font-size: 25px;
      color: #5E4B43;
      border-radius: 10px;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    }

    .image-text p {
      margin: 0;
      font-size: 18px;
      color: #787878;
    }

    h1 {
      font-size: 40px;
      text-align: center;
      margin: 0;
      padding: 10px;
      background-color: #F7D246; 
      color: #5E4B43;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    }

    h2 {
      font-size: 30px;
      text-align: center;
      margin: 0;
      padding: 10px;
      background-color: #F7D246;
      color: #FFFFFF;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    }

    .sidebar {
      position: fixed;
      top: 0;
      left: 0;
      width: 25%;
      height: 100vh;
      background-color: #F7D246;
      padding: 20px;
      overflow-y: auto;
      transition: transform 0.3s ease-in-out;
      transform: translateX(-100%);
      z-index: 100;
    }

    .sidebar.collapsed {
      transform: translateX(0);
    }

    .sidebar h2 {
      font-size: 25px;
      padding: 20px;
      color: #5E4B43;
      margin: 0;
    }

    .sidebar-menu {
      list-style-type: none;
      padding: 0;
      margin: 0;
    }

    .sidebar-menu li {
      padding: 10px 20px;
      cursor: pointer;
      background-color: #FFFFFF;
      border-bottom: 1px solid #F7D246;
    }


    .sidebar-menu li:last-child {
      border-bottom: none;
    }

    .sidebar-menu li:hover {
      background-color: #F0E5BA;
    }

    .sidebar-toggle {
      position: fixed;
      top: 20px;
      left: 0px;
      background-color: #F7D246;
      color: #5E4B43;
      border: none;
      padding: 5px 10px;
      border-radius: 5px;
      cursor: pointer;
      z-index: 200;
      font-size: 24px;
    }

    .sidebar-toggle svg {
      vertical-align: middle;
      margin-right: 5px;
    }

    @media (max-width: 768px) {
      .container {
        padding: 10px;
      }
      .image-text {
        width: 90%;
      }
      .sidebar {
        width: 90%;      

      }
      .sidebar.collapsed {
        transform: translateX(0);
      }
    }
  </style>
  <script>
    // JavaScript code for functionality

    var imageMap = new Map([
      [
        "神虾桶小龙虾99元3斤起！",
        "2023.06.24-2023.06.30"
      ],
      [
        "麦当劳外送分享桶66元",
        "2023.06.24-2023.06.30"
      ],
      [
        "幸运咖双杯椰椰拿铁17.9元",
        "2023.06.24-2023.06.30"
      ],
      [
        "茉酸奶双杯套餐49.9元",
        "2023.06.24-2023.06.30"
      ],
      [
        "幸福西饼鲜芒8英寸蛋糕79.9元！",
        "2023.06.24-2023.06.30"
      ],
      [
        "吉野家单人限量套餐23.3",
        "2023.06.24-2023.06.30"
      ],
      [
        "正新鸡排炸鸡+炸串二人套餐49.9",
        "2023.06.24-2023.06.30"
      ],
      [
        "棒约翰比萨2件59.9",
        "2023.06.24-2023.06.30"
      ],

    //  不动
      [
        "超值券包囤美味！外卖超值券包！大牌爆品！超低价格！优惠期长",
        "2023.02.15-2023.12.31"
      ],
      [
        "美团拼好饭，新人5.9元点外卖，全场0配送费，领券更优惠",
        "长期"
      ],
      
    ]);

    window.onload = function() {
      var container = document.querySelector('.container');
      var sidebarMenu = document.querySelector('.sidebar-menu');
      var sidebarToggle = document.querySelector('.sidebar-toggle');
      var sidebar = document.querySelector('.sidebar');
      var menuLinks = document.querySelectorAll('.sidebar-menu li');

      imageMap.forEach(function(value, key) {
        var div = document.createElement('div');
        div.classList.add('image-text');

        var h2 = document.createElement('h2');
        h2.textContent = key;

        var p = document.createElement('p');
        p.textContent = "有效期：" + value;

        var img = document.createElement('img');
        img.src = key.concat('.jpg');
        img.alt = "图片描述";

        div.appendChild(h2);
        div.appendChild(p);
        div.appendChild(img);

        container.appendChild(div);
      });

      // Toggle sidebar function
      sidebarToggle.addEventListener('click', function() {
        sidebar.classList.toggle('collapsed');
      });

      // Scroll to section function
      function scrollToSection(index) {
        var sections = document.querySelectorAll('.image-text');
        var section = sections[index];
        if (section) {
          section.scrollIntoView({ behavior: 'smooth' });
        }
      }

      // Add click event to menu links
      menuLinks.forEach(function(link, index) {
        link.addEventListener('click', function() {
          scrollToSection(index);
          sidebar.classList.toggle('collapsed');
        });
      });
    };
    
  </script>
</head>
<body>
  <h1>美团外卖</h1>
  <button class="sidebar-toggle">
    <img src="菜单.svg" alt="Icon" style="width: 24px; height: 24px;">
     菜单
  </button>
 <div class="sidebar">
  <h2> </h2>
  <h2> </h2>
  <ul class="sidebar-menu">
    <!-- Generate menu items based on imageMap -->
    <script>
      imageMap.forEach(function(value, key) {
        var menuItem = document.createElement('li');
        menuItem.addEventListener('click', function() {
          scrollToSection(imageMap.get(key));
          sidebar.classList.add('collapsed');
        });
        document.querySelector('.sidebar-menu').appendChild(menuItem);
      });
    </script>
  </ul>
</div>

  
  <div class="container"></div>
</body>
</html>


